<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="车牌号：">
              <el-input
               style="width:200px"
                v-model="select.name"
                placeholder="请输入车牌"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="screeningData"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="handleAddLine"
              >新增路线</el-button
            >
            <el-button style="padding: 0; border: 0">
              <el-upload
                action="/上传文件的接口"
                :on-change="onChange"
                :auto-upload="false"
                :show-file-list="false"
                accept=".xls, .xlsx"
                class="upload"
              >
                <el-button size="mini" type="success">批量导入</el-button>
              </el-upload>
            </el-button>
            <el-button size="mini" type="warning" @click="exportExcel"
              >批量导出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :cell-style="{ padding: '8px 0px' }"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <!-- <el-table-column prop="ID" label="ID" align="center"></el-table-column> -->
      <el-table-column
        prop="LICENSE_PLATE"
        label="负责车辆"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="StartTime"
        label="起始时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WorkPoint"
        label="点位个数"
        align="center"
      ></el-table-column>
      <el-table-column label="途径点位" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleRubbishPointDetail(scope.$index, scope.row)"
            >点位列表</el-button
          >
          <el-button
            type="text"
            @click="handleAddPoint(scope.$index, scope.row)"
            >新增</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="规划" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.ISPLANED === '0'"
            type="text"
            @click="handleSubmitPlan(scope.$index, scope.row)"
            >开始规划</el-button
          >
          <p v-else>已完成规划</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope"> -->
          <el-button type="text" @click="handleShowMap(scope.$index, scope.row)"
            >计划与实际路线对比</el-button
          >
          <!-- <el-button type="text" @click="handleEditPoint(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDeletePoint(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 添加路线 -->
    <el-dialog title="新增路线" :visible.sync="addLineDialogShow" width="50%">
      <el-form
        ref="formLine"
        :model="formLine"
        label-width="120px"
        class="flex"
      >
        <el-form-item label="车辆：">
          <el-select
            style="width: 177px"
            v-model="formLine.carID"
            :options="optionsCarNoPlan"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              v-for="item in optionsCarNoPlan"
              :key="item.VID"
              :label="item.LICENSE_PLATE"
              :value="item.VID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出发时间：">
          <el-input
            v-model="formLine.StartTime"
            placeholder="请输入出发时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="出发点经度：">
          <el-input
            v-model="formLine.slng"
            placeholder="请输入出发点经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="出发点纬度：">
          <el-input
            v-model="formLine.slat"
            placeholder="请输入出发点纬度"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束点经度：">
          <el-input
            v-model="formLine.elng"
            placeholder="请输入结束点经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束点纬度：">
          <el-input
            v-model="formLine.elat"
            placeholder="请输入结束点纬度"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button
        type="success"
        style="float: right; margin: 20px"
        @click="handleAddPoint"
        >新增点位</el-button
      >
      <el-table :data="formLine.pointsData">
        <el-table-column
          prop="PointName"
          label="点位名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Stime"
          label="开始时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Etime"
          label="结束时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Wtime"
          label="停留时间"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addLineDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitLine()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框 添加途径点 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="addPointDialogShow"
      width="50%"
    >
      <el-form
        ref="formPoint"
        :model="formPoint"
        label-width="140px"
        class="flex"
      >
        <el-form-item label="点位名称：" style="width: 80%">
          <el-select
            :disabled="addDialogTitle === '编辑点位信息'"
            v-model="formPoint.title"
            filterable
            clearable
            @change="changeMapPoint"
            placeholder="请输入点位名称"
          >
            <el-option
              v-for="(item, index) in dataRubbishPoints"
              :value="item.ID"
              :label="item.NAME"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label-width="20px"
          v-if="addDialogTitle === '新增点位信息'"
        >
          <div class="l-header" @click="showMapPointDialog('3')">
            <slot name="left">
              <img
                style="height: 26px"
                src="@/assets/img/marker/mapicon.png"
                alt=""
              />
            </slot>
          </div>
        </el-form-item>
        <!-- <el-form-item label="经度：">
          <el-input
            v-model="formPoint.data.LONGITUDE"
            placeholder="请输入经度"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="纬度：">
          <el-input v-model="formPoint.data.LATITUDE" placeholder="请输入纬度"></el-input>
        </el-form-item> -->
        <el-form-item label="最早到达时间：">
          <!-- <el-input
            v-model="formPoint.data.Stime"
            placeholder="请选择开始时间"
          ></el-input> -->
          <el-time-picker
            editable
            value-format="HH:mm"
            format="HH:mm"
            v-model="formPoint.data.Stime"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:00',
            }"
            placeholder="请选择最早到达时间"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="最晚到达时间：">
          <!-- <el-input
            v-model="formPoint.data.Etime"
            placeholder="请选择结束时间"
          ></el-input> -->
          <el-time-picker
            editable
            value-format="HH:mm"
            format="HH:mm"
            v-model="formPoint.data.Etime"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:00',
            }"
            placeholder="请选择最晚到达时间"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="停留时间（秒）：">
          <el-input
            v-model="formPoint.data.Wtime"
            placeholder="工作所需停留时间"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPointDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitAddPoint()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 弹出框 从地图取点 -->
    <el-dialog title="获取地址信息" :visible.sync="formPoint.show" width="50%">
      <el-form
        ref="formPoint"
        :model="formPoint"
        label-width="140px"
        class="flex"
      >
        <el-form-item label="点位名称：" style="width: 80%">
          <el-select
            v-model="formPoint.title"
            filterable
            clearable
            placeholder="请输入点位名称"
            @change="changeMapPoint"
          >
            <el-option
              v-for="(item, index) in dataRubbishPoints"
              :value="item.ID"
              :label="item.NAME"
              :key="index"
            ></el-option>
          </el-select>
          <!-- <el-input
            id="suggestId"
            v-model="formPoint.LOCATION"
            placeholder="请输入点位名称"
          ></el-input> -->
        </el-form-item>
        <!-- <el-form-item label="经度：">
          <el-input
            v-model="formPoint.data.LONGITUDE"
            placeholder="请输入经度"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="纬度：">
          <el-input
            v-model="formPoint.data.LATITUDE"
            placeholder="请输入纬度"
          ></el-input>
        </el-form-item> -->
      </el-form>
      <div
        id="mapDialog"
        style="width: 90%; height: 400px; margin-left: 5%; margin-right: 5%"
      ></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formPoint.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitMapPoint()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 弹出框 垃圾点位详情列表 -->
    <el-dialog
      title="途径垃圾点位详情"
      :visible.sync="rubbishPointDetailDialogShow"
      width="50%"
    >
      <el-table :data="rubbishPointsData">
        <el-table-column
          prop="PointName"
          label="点位名称"
          align="center"
        ></el-table-column>
        <el-table-column
          :formatter="formatterYJTime"
          label="预计到达时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Wtime"
          label="预计作业时长（秒）"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="dblClickRow"
            >定位</el-button
          > -->
            <el-button
              type="text"
              @click="handleEditPoint(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="handleDeletePoint(scope.$index, scope.row)"
              style="color: red"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rubbishPointDetailDialogShow = false"
          >取 消</el-button
        >
        <!-- <el-button type="primary" @click="rubbishPointDetailDialogShow = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import export2Excel from '@/utils/exportExcel/index.js'
import eventBus from '@/eventBus.js'


export default {
  data () {
    return {
      marker: null,
      map: null,
      mapZoom: 16,
      mapDialog: null,
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      dataRubbishPoints: [],
      select: {
        name: '',
      },
      form: {
        tag: '',
        LONGITUDE: '',
        LATITUDE: '',
        LOCATION: '',
        stime: '',
        etime: '',
        wtime: '',
        lineData: {}
      },
      formLine: {
        ID: '',
        slat: '',
        slng: '',
        StartTime: '05:00',
        elng: '',
        elat: '',
        carID: '',
        pointsData: []
      },
      lineIDForAddPoint: '',
      // formLine: {
      //   Title: '新增路线',
      //   ID: '',
      //   VID: '',
      //   StartLATITUDE: '',
      //   StartLONGITUDE: '',
      //   StartTime: '05:00',
      //   EndLONGITUDE: '',
      //   EndLATITUDE: '',
      //   pointsData: []
      // },
      formPoint: {
        title: '',
        data: {},
        show: false,
        tag: ''
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {}
      },
      addDialogTitle: '',
      // addLineDialogTitle: '',
      addLineDialogShow: false,
      addPointDialogShow: false,
      rubbishPointDetailDialogShow: false,
      rubbishPointsData: [],
      optionsCar: [],
      optionsCarPlaned: [],
      optionsCarNoPlan: [],
      selectCarID: '',
      selectRoadID: ''
    }
  },
  mounted () {
    this.getAllCar();
    this.getAllPoint();
    this.getlistdata();
  },
  methods: {
    //获取车辆数据
    async getAllCar () {
      this.optionsCarPlaned = []
      this.optionsCarNoPlan = []
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Kitchen/GetVehicleListPlan'
      const { data } = await this.$Http.get(url)
      this.optionsCar = data
      data.forEach(element => {
        if (element.ID) {
          this.optionsCarPlaned.push(element)
        } else {
          this.optionsCarNoPlan.push(element)
        }
      })
    },
    //获取点位数据
    async getAllPoint () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetPlacePointApi'
      const { data } = await this.$Http.get(url)
      this.dataRubbishPoints = data
    },
    //获取tableData
    async getlistdata () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetVehicleRubbishPlan'
      const { data } = await this.$Http.get(url)
      this.originalData = data
      if (this.selectRoadID != '') {
        this.originalData.forEach(element => {
          if (element.ID === this.selectRoadID) {
            this.rubbishPointsData = element.PlanLinePoints;
          }
        });
      }


      this.screeningData()
    },
    // 模糊查询
    screeningData () {
      this.currentPage = 1;
      this.tableData = this.originalData
      if (this.select.name) this.tableData = this.tableData.filter(item => item.LICENSE_PLATE.includes(this.select.name))
      // console.log(this.select.name)
      // eventBus.$emit('mapData_Water', this.tableData)
    },
    formatterYJTime (row) {
      return row.Stime + ' - ' + row.Etime
    },
    handleRubbishPointDetail (index, row) {
      this.rubbishPointDetailDialogShow = true;
      this.rubbishPointsData = row.PlanLinePoints;
      this.selectRoadID = row.ID
    },
    handleShowMap (index, row) {
      this.$router.push({ path: '/ShowRouteKitchen', query: { VID: row.VID } })
    },
    // 点击在地图上选择点位
    showMapPointDialog (tag) {
      this.formPoint.show = true
      // this.formPoint.tag = tag
      if (!this.map) {
        const _this = this
        setTimeout(() => {
          _this.mapShow()
        }, 2000)// 延时3秒
      }
    },
    // 显示地图
    mapShow () {
      var point = new BMap.Point(this.dataRubbishPoints[0].LONGITUDE, this.dataRubbishPoints[0].LATITUDE)
      // 百度地图API功能
      this.map = new BMap.Map('mapDialog') // 创建Map实例
      this.map.centerAndZoom(point, this.mapZoom);
      // this.map.setCurrentCity('滨海新区') // 设置地图显示的城市 此项是必须设置的

      // 开启滚轮缩放
      this.map.enableScrollWheelZoom(true)

      this.drawRubbishPoints();
    },
    // 画途经垃圾点位
    drawRubbishPoints () {
      let img = new Image();
      img.src = require('@/assets/img/marker/PlanPoint1.png')
      const _self = this;
      // alert(_self.dataRubbishPoints.length)
      img.onload = function () {
        let arr = _self.dataRubbishPoints.map(v => {
          v.geometry = {
            type: 'Point',
            coordinates: [v.LONGITUDE, v.LATITUDE]
          }
          v.icon = img;
          v.text = v.NAME;
          return v;
        })
        let dataSet = new mapv.DataSet(arr);

        let optionsICON = {
          draw: 'icon',
          width: 30, // 规定图像的宽度
          height: 30, // 规定图像的高度
          size: 30,
          methods: {
            click: function (item, event) { // 点击事件，返回对应点击元素的对象值.
              if (item) {
                // _self.formPoint.title = item.ID + '-' + item.NAME
                _self.formPoint.title = item.NAME
                _self.formPoint.data.PointName = item.NAME
                _self.formPoint.data.PointID = item.ID
                _self.formPoint.data.LATITUDE = item.LATITUDE_GPS
                _self.formPoint.data.LONGITUDE = item.LONGITUDE_GPS
              }
            }
          },
        }
        let optionsTEXT = {
          draw: 'text',
          font: '13px Arial',
          textAlign: 'center',
          offset: { // 文本便宜值
            x: 0,
            y: 25
          }
        }
        // console.log(_self.map);
        new mapv.baiduMapLayer(_self.map, dataSet, optionsICON);
        new mapv.baiduMapLayer(_self.map, dataSet, optionsTEXT);
      }
    },
    changeMapPoint () {
      var array = this.dataRubbishPoints.filter(item => item.ID === this.formPoint.title)
      var itemPoint = array[0]
      // this.formPoint.title = itemPoint.ID + '-' + itemPoint.NAME
      this.formPoint.title = itemPoint.NAME
      // this.formPoint.data = itemPoint;
      this.formPoint.data.PointName = itemPoint.NAME
      this.formPoint.data.PointID = itemPoint.ID
      this.formPoint.data.LONGITUDE = itemPoint.LONGITUDE_GPS
      this.formPoint.data.LATITUDE = itemPoint.LATITUDE_GPS

      // 改变地图中心点
      // var point = new BMap.Point(itemPoint.LONGITUDE, itemPoint.LATITUDE)
      // this.map.centerAndZoom(point, this.mapZoom);
    },
    // 新增途径点位 - 打开窗口
    handleAddPoint (index, row) {
      this.addDialogTitle = '新增点位信息'
      //展示窗口
      this.addPointDialogShow = true;
      this.formPoint.title = ''
      this.formPoint.data = {}
      this.formPoint.data.Stime = '06:00'
      this.formPoint.data.Etime = '23:00'
      this.formPoint.data.Wtime = '600'
      this.lineIDForAddPoint = row.ID;
    },
    // 编辑途径点位 - 打开窗口
    handleEditPoint (index, row) {
      console.log(row)
      this.addPointDialogShow = true;
      this.addDialogTitle = '编辑点位信息'
      this.formPoint.data = Object.assign({}, row);
      this.formPoint.title = row.PointName
    },
    // 新增or编辑途径点位 - 确定按钮
    handleSubmitAddPoint () {
      if (this.rubbishPointDetailDialogShow) {
        this.updatePointOfWorkLine()
      } else
        if (this.addLineDialogShow) {
          for (var i = this.formLine.pointsData.length - 1; i >= 0; i--) {
            if (this.formLine.pointsData[i].PointID === this.formPoint.data.PointID) {
              this.formLine.pointsData.splice(i, 1)
            }
          }
          this.formLine.pointsData.push(this.formPoint.data)
          this.addPointDialogShow = false
        } else {
          this.addPointOfWorkLine([this.formPoint.data], this.lineIDForAddPoint)
        }
    },
    // 新增途径点位 - 上传链接
    async addPointOfWorkLine (para, RID) {
      para[0].RID = RID
      this.$axios({
        url: 'http://111.160.78.62:9930/Cityscapeapi/Kitchen/AddPointlistForWorkLine2',
        method: 'post',
        data: para
      }).then(res => {
        console.log('AddPointlistForWorkLine')
        console.log(res.data)
        if (res.data.IsSucess) {
          // eventBus.$emit('UpdateTable')
          this.$message.success('操作成功')
          this.addPointDialogShow = false

          this.getlistdata()
        } else {
          this.$message.error(res.data.Message)
        }
      })
    },
    // 编辑途径点位 - 上传链接
    async updatePointOfWorkLine () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Kitchen/UpdatePointInfoOfWorkLine?Stime=' + this.formPoint.data.Stime + '&Etime=' + this.formPoint.data.Etime +
        '&Wtime=' + this.formPoint.data.Wtime + '&PointID=' + this.formPoint.data.PointID + '&PlanID=' + this.formPoint.data.ID
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('操作成功')
        this.addPointDialogShow = false
        this.getlistdata()
      } else {
        this.$message.error(res.data.Message)
      }
    },
    //删除途径点位 - 上传链接
    async handleDeletePoint (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          PointID: row.PointID,
          PlanID: row.ID,
        }
        const { data } = await this.$Http.get('http://111.160.78.62:9930/Cityscapeapi/Kitchen/DeletePointOfWorkLine', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          this.getlistdata()
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
      }
    },
    handleAddLine () {
      this.formLine = {
        ID: '',
        slat: '',
        slng: '',
        StartTime: '05:00',
        elng: '',
        elat: '',
        carID: '',
        pointsData: []
      },
        this.addLineDialogShow = true;
    },
    handleSubmitLine () {
      this.addWorkLine();
    },
    async addWorkLine () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/saveRubbishPlan?vid=' + this.formLine.carID
        + '&StartLATITUDE=' + this.formLine.slat + '&StartLONGITUDE=' + this.formLine.slng
        + '&EndLATITUDE=' + this.formLine.elat + '&EndLONGITUDE=' + this.formLine.elng
        + '&StartTime=' + this.formLine.StartTime
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      this.$axios({
        url: url,
        method: 'get',
      }).then(res => {
        loading.close()
        if (res.data[0].ID) {
          this.addLineDialogShow = false;
          this.getAllCar()
          this.addPointOfWorkLine(this.formLine.pointsData, res.data[0].ID)
        } else {
          this.$message.console.error('新增路线失败');
        }
      })
    },
    // async getNavigationRoute (vid, startpointlat, startpointlng, endpointlat, endpointlng, spstarttime, lat, lng, stime, etime, wtime, name) {

    //   // http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetNavigationRoute?vid=17062&startpointlat=117.388571&startpointlng=39.098332
    //   // &endpointlat=117.452125&endpointlng=39.013824&spstarttime=05:00&lat=39.080609,39.080631,39.065515,39.068975,39.098332,39.096060,39.042122
    //   // &lng=117.504596,117.515233,117.525066,117.527189,117.539483,117.487673,117.494447&stime=05:00,05:00,05:00,05:00,05:00,05:00,05:00&etime=23:50,23:50,23:50,23:50,23:50,23:50,23:00&wtime=278,913,425,398,376,338,600&pointname=%E9%95%BF%E5%9F%8E%E7%89%A9%E6%B5%81,%E9%95%BF%E5%9F%8E%E4%BA%8C%E6%9C%9F,%E9%94%A6%E6%B9%96%E8%BD%AE%E8%83%8E,%E5%B1%B1%E5%8F%A3%E6%B1%BD%E8%BD%A6%E7%B4%A7%E5%9B%BA%E4%BB%B6,%E9%87%91%E8%80%80%E8%8D%AF%E4%B8%9A,%E5%A4%A9%E8%99%B9%E5%85%AC%E5%AF%93%E4%B8%80%E6%9C%9F,%E9%93%B6%E6%B2%B3%E9%85%92%E5%BA%97

    //   var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetNavigationRoute?vid=' + vid
    //     + '&startpointlat=' + startpointlat + '&startpointlng=' + startpointlng
    //     + '&endpointlat=' + endpointlat + '&endpointlng=' + endpointlng
    //     + '&spstarttime=' + spstarttime + '&lat=' + lat + '&lng=' + lng + '&stime=' + stime + '&etime=' + etime + '&wtime=' + wtime + '&pointname=' + name
    //   const loading = this.$loading({
    //     lock: true,
    //     text: '数据加载中...',
    //     spinner: 'el-icon-loading',
    //     background: 'rgba(0, 0, 0, 0.5)'
    //   })
    //   let _this = this;
    //   console.log(url)
    //   // const { data } = await this.$Http.get(url)
    //   //   .then(data => {
    //   //     loading.close()
    //   //     if (data.linenumber) {
    //   //       console.log('结果')
    //   //       console.log(data.linenumber)
    //   // this.addLineDialogShow = false;
    //   // this.addPointDialogShow = false;
    //   // this.getlistdata()
    //   //     }
    //   //   })
    //   this.$axios({
    //     url: url,
    //     method: 'get',
    //   }).then(res => {
    //     loading.close()
    //     if (res.data.linenumber) {
    //       this.$message.success('新增成功');
    //       _this.addLineDialogShow = false;
    //       _this.addPointDialogShow = false;
    //       _this.getlistdata()
    //     } else {
    //       this.$message.console.error('新增失败，未计算出符合条件的路线');
    //     }
    //   })
    // },
    // 导入Excel
    onChange (file, fileList) {
      //  console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel (e) {
      let that = this;
      const files = that.fileData;
      console.log(files);
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      console.log(fileReader)
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          //  console.log(ev.target)
          //  console.log(this);
          const workbook = this.XLSX.read(data, {
            type: "binary"// 以字符编码的方式解析
          });

          if (workbook.SheetNames.length >= 1) {
            //  this.$message({
            //    message: "导入数据表格成功",
            //    showClose: true,
            //    type: "success"
            //  });

            const wsname = workbook.SheetNames[0]; //取第一张表
            const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
            // console.log(ws)
            // this.inputExcelDataLength = ws.length
            // this.fullscreenLoading = this.$loading({
            //   lock: true,
            //   text: 'Loading',
            //   spinner: 'el-icon-loading',
            //   background: 'rgba(0, 0, 0, 0.7)'
            // })
            this.bulkLoad(ws)
          } else {
            this.$message.error("未读取到表格内容");
          }
        } catch (e) {
          console.log(e)
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
    async bulkLoad (ws) {
      var lat = [], lng = [], stime = [], etime = [], wtime = [], name = [];
      for (let i = 2, len = ws.length - 1; i < len; i++) {
        lat.push(ws[i].lat)
        lng.push(ws[i].lng)
        stime.push(ws[i].stime)
        etime.push(ws[i].etime)
        wtime.push(ws[i].wtime)
        name.push(ws[i].name)
      }

      this.getNavigationRoute(ws[0].name, ws[1].lat, ws[1].lng, ws[ws.length - 1].lat, ws[ws.length - 1].lng, ws[1].stime, lat, lng, stime, etime, wtime, name)
    },
    // 点击保存，判断是新增还是编辑操作
    // handleSubmit () {
    //   if (!this.form.lineData) {
    //     this.formLine.pointsData.push(this.form)
    //     console.log(this.formLine.pointsData)
    //     this.addPointDialogShow = false;
    //     return;
    //   }
    //   var lat = [], lng = [], stime = [], etime = [], wtime = [], name = [];
    //   var ws = this.form.lineData.PlanLinePoints
    //   for (let i = 0, len = ws.length; i < len; i++) {
    //     lat.push(ws[i].LATITUDE)
    //     lng.push(ws[i].LONGITUDE)
    //     stime.push(ws[i].Stime)
    //     etime.push(ws[i].Etime)
    //     wtime.push(ws[i].Wtime)
    //     name.push(ws[i].PointName)
    //   }
    //   lat.push(this.form.LATITUDE)
    //   lng.push(this.form.LONGITUDE)
    //   stime.push(this.form.Stime)
    //   etime.push(this.form.Etime)
    //   wtime.push(this.form.Wtime)
    //   name.push(this.form.PointName)
    //   console.log("测试：", this.form)
    //   // const loading = this.$loading({
    //   //   lock: true,
    //   //   text: '数据加载中...',
    //   //   spinner: 'el-icon-loading',
    //   //   background: 'rgba(0, 0, 0, 0.5)'
    //   // })
    //   this.getNavigationRoute(this.form.lineData.VID, this.form.lineData.StartLATITUDE, this.form.lineData.StartLONGITUDE,
    //     this.form.lineData.EndLATITUDE, this.form.lineData.EndLONGITUDE, this.form.lineData.StartTime, lat, lng, stime, etime, wtime, name)
    //   // {"ID":"21","VID":"17051","LICENSE_PLATE":"津RET071","StartTime":"02:39","StartLONGITUDE":"117.388571",
    //   // "StartLATITUDE":"38.852379","EndLONGITUDE":"117.426409","EndLATITUDE":"38.872884","WorkPoint":"5","PlanLinePoints":
    //   // if (this.addDialogTitle == '新增点位信息') {
    //   // this.saveAdd()
    //   // } else {
    //   // this.saveEdit()
    //   // }
    // },

    // handleSubmitLine1 () {
    //   var lat = [], lng = [], stime = [], etime = [], wtime = [], name = [];
    //   var ws = this.formLine.pointsData
    //   for (let i = 0, len = ws.length; i < len; i++) {
    //     lat.push(ws[i].LATITUDE)
    //     lng.push(ws[i].LONGITUDE)
    //     stime.push(ws[i].Stime)
    //     etime.push(ws[i].Etime)
    //     wtime.push(ws[i].Wtime)
    //     name.push(ws[i].PointName)
    //   }
    //   this.getNavigationRoute(this.formLine.carID, this.formLine.slat, this.formLine.slng,
    //     this.formLine.elat, this.formLine.elng, this.formLine.StartTime, lat, lng, stime, etime, wtime, name)
    // },
    // 导出Excel
    exportExcel () {
      const newArr = this.tableData
      let excelData = [];
      newArr.forEach((val) => {
        val.PlanLinePoints.forEach((obj) => {
          obj.LICENSE_PLATE = val.LICENSE_PLATE
          obj.StartTime = val.StartTime
          obj.WorkPoint = val.WorkPoint
          obj.YjTime = obj.Stime + " - " + obj.Etime
          excelData.push(obj)
        })
      })
      console.log("点位信息：" + excelData)
      let excelName = '作业计划'
      const tHeader = ['负责车辆', '起始时间', '点位个数', '点位名称', '预计到达时间', '预计作业时长（秒）']
      const filterVal = ['LICENSE_PLATE', 'StartTime', 'WorkPoint', 'PointName', 'YjTime', 'Wtime']
      export2Excel(tHeader, filterVal, excelData, excelName)
    },
    // 开始规划
    async handleSubmitPlan (index, row) {
      const loading = this.$loading({
        lock: true,
        text: '正在路线规划中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/CreateRubbishPlan?lineID=' + row.ID
      this.$axios({
        url: url,
        method: 'get',
      }).then(res => {
        loading.close()
        if (res.data) {
          this.getlistdata();
          this.$message.success('操作成功')
        } else {
          this.$message.error('路线规划失败')
        }
      })
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },
  }
}
</script>
<style scoped lang="less">
/* #map {
  width: 500px;
  height: 400px;
} */
.tangram-suggestion {
  z-index: 9999;
}
.content {
  height: calc(80%);
}
// .el-table .el-table__cell {
//     padding: 2px 0;
// }
</style>